<template>
  <view class="content1" style="background-color: #f8f8f8;">
    <view :style="{ height: api.navbarHeight + 'px' }" style="position: relative; z-index: 999; background-color: #ffffff;">
      <view class="flex align-center justify-start" style="position: absolute; width: 100%;" :style="{ left: 20 + 'rpx', bottom: 0 + 'px' }">
        <view @click="$api.back()" class="flex justify-center align-center">
          <u-icon name="arrow-left" size="40"></u-icon>
        </view>
        <view class="margin-left flex justify-center align-center">
          <u-search placeholder="搜索你需要的产品" v-model="keyword" :show-action="false"></u-search>
        </view>
      </view>
    </view>

    <view class="comment-section">
      <view class="topwe padding" style="background-color: #ffffff;">
        <view class="comment-title text-bold text-lg color-black">
          商品评价 <text class="count text-sm color-black">({{ comments.length || 0 }})</text>
        </view>

        <!-- 评价标签 -->
        <scroll-view scroll-x class="tag-scroll">
          <view class="tag-list flex flex-wrap">
            <view
              v-for="(tag, index) in tags"
              :key="index"
              :class="['tag-item', 'margin-top', { active: currentTag === index }]"
              @tap="switchTag(index)"
            >
              {{ tag.name }}<text class="tag-count text-sm color-grey">({{ tag.count }})</text>
            </view>
          </view>
        </scroll-view>
      </view>

      <!-- 评价内容滚动区域 -->
      <scroll-view
        scroll-y
        class="comment-scroll"
    
      >
        <view class="comment-list padding-lr" style="background-color: #ffffff; border-radius: 20rpx;margin-bottom: 100rpx;">
          <view class="comment-item" v-for="(comment, index) in comments[currentTag]" :key="index">
            <!-- 用户头像 -->
            <view class="user-info flex justify-start align-center">
              <view class="avtar">
                <image class="avatar" src="https://env-00jxt1fzew48.normal.cloudstatic.cn/home/avtar.png" mode="aspectFill"></image>
              </view>
              <view class="user-detail">
                <text class="username text-bold text-df">{{ comment.username }}</text>
                <text class="date text-sm color-grey">{{ comment.date }}</text>
              </view>
            </view>

            <view class="card">
              <view class="top flex justify-between">
                <text class="flex text-sm color-grey">{{ comment.product }}</text>
                <text class="date text-sm color-grey">{{ comment.date }}</text>
              </view>
              <view class="content text-sm color-black margin-top text-bold">{{ comment.content }}</view>
              <view class="image-list" v-if="comment.images && comment.images.length">
                <image
                  v-for="(img, imgIndex) in comment.images"
                  :key="imgIndex"
                  :src="img"
                  mode="aspectFill"
                  class="comment-image"
                  @tap="previewImage(imgIndex, comment.images)"
                ></image>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- 底部操作栏 -->
    <view class="footer flex justify-around align-center" style="height: 100rpx; background-color: #ffffff; width: 100%; z-index: 999;">
      <view class="leftw flex justify-around align-center padding-left">
        <view class="ti flex flex-direction color-black">
        <u-icon name="https://env-00jxt1fzew48.normal.cloudstatic.cn/home/dianu.png" size="44"></u-icon>
          <text class="text-xs"> 店铺</text>
        </view>
        <view class="rrrq flex flex-direction color-black margin-left-lg" style="position: relative;">
          <u-badge type="error" count="7" :offset="[0, 10]"></u-badge>
         <u-icon name="https://env-00jxt1fzew48.normal.cloudstatic.cn/home/gouwuche.png" size="44"></u-icon>
          <text class="text-xs">购物车</text>
        </view>
      </view>
      <view class="righre flex justify-between align-center">
        <view style="width: 264rpx; height: 80rpx; background-color: #413936; border-radius: 40rpx; color: white;" class="flex align-center justify-around margin-right">加入购物车</view>
        <view style="width: 264rpx; height: 80rpx; background-color: #FF625F; border-radius: 40rpx; color: white;" class="flex align-center justify-around">立即购买</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      keyword: '',
      currentTag: 0,
      tags: [
        { name: '全部', count: 2 },
        { name: '最新', count: 1 },
        { name: '有图', count: 1 },
        { name: '好评', count: 1 },
        { name: '中评', count: 0 },
        { name: '差评', count: 0 },
      ],
      comments: [
        [
          {
            username: '别生气',
            product: '已购维尼熊摆件',
            date: '2023年10月21日',
            content: '很好看，喜欢，推荐',
            images: [
              'https://env-00jxt1fzew48.normal.cloudstatic.cn/home/detail.png',
              'https://env-00jxt1fzew48.normal.cloudstatic.cn/home/detail.png',
            ],
          },
          {
            username: '别生气',
            product: '已购维尼熊摆件',
            date: '2023年10月21日',
            content: '很好看，喜欢，推荐',
            images: [
              'https://env-00jxt1fzew48.normal.cloudstatic.cn/home/detail.png',
              'https://env-00jxt1fzew48.normal.cloudstatic.cn/home/detail.png',
            ],
          },
          {
            username: '用户123',
            product: '已购儿童玩具',
            date: '2023年10月20日',
            content: '质量不错，孩子很喜欢',
            images: [
              'https://env-00jxt1fzew48.normal.cloudstatic.cn/home/detail.png',
              'https://env-00jxt1fzew48.normal.cloudstatic.cn/home/detail.png',
            ],
          },
        ],
        [
          {
            username: '用户456',
            product: '已购最新款运动鞋',
            date: '2023年10月15日',
            content: '舒适轻便，穿着很舒服',
            images: [],
          },
        ],
        [
          {
            username: '用户789',
            product: '已购维尼熊摆件',
            date: '2023年10月21日',
            content: '图很好看，推荐！',
            images: [
              'https://env-00jxt1fzew48.normal.cloudstatic.cn/home/detail.png',
              'https://env-00jxt1fzew48.normal.cloudstatic.cn/home/detail.png',
            ],
          },
        ],
        [],
        [],
      ],
    };
  },
  methods: {
    switchTag(index) {
      this.currentTag = index;
    },
    previewImage(index, images) {
      uni.previewImage({
        urls: images,
        current: images[index],
      });
    },
  },
  computed: {
    api() {
      return this.$api || {};
    },
  },
};
</script>
<style lang="scss">
.comment-section {
  padding: 20rpx;
}

.tag-scroll {
  white-space: nowrap;
  padding: 20rpx 0;
}

.tag-list {
  display: flex;
}

.tag-item {
  display: inline-block;
  padding: 8rpx 24rpx;
  margin-right: 20rpx;
  font-size: 24rpx;
  background: #f5f5f5;
  color: #292421;
  border-radius: 24rpx;
  position: relative;
}

.tag-item.active {
  background: #FF1712;
  color: #fff;
}

.tag-count {
  margin-left: 4rpx;
  color: #999;
}

.comment-scroll {
  margin-top: 20rpx;
}

.comment-list {
  margin-top: 20rpx;
}

.comment-item {
  padding: 20rpx 0;
  border-top: 1rpx solid #f5f5f5;
}

.user-info {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.avatar {
  width: 64rpx;
  height: 64rpx;
  border-radius: 50%;
  margin-right: 20rpx;
}

.user-detail {
  display: flex;
  flex-direction: column;
}

.username {
  font-size: 28rpx;
  color: #333;
}

.date {
  font-size: 24rpx;
  color: #999;
  margin-top: 4rpx;
}

.content {
  font-size: 28rpx;
  color: #333;
  line-height: 1.6;
  margin-bottom: 20rpx;
}

.image-list {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10rpx;
}

.comment-image {
  width: 300rpx;
  height: 300rpx;
  margin-right: 10rpx;
  margin-bottom: 10rpx;
  border-radius: 8rpx;
}

.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
}
</style>